<template>
  <div style="width: 100%; height: 100%; background: #282c34">
    <div id="top-title" style="width: 100%; height: 13%">
      <p
        style="
          width: 90%;
          margin: 0 auto;
          padding-top: 15px;
          font-size: 26px;
          text-align: center;
          color: white;
          font-family: cursive fangsong;
          font-weight: bold;
        "
      >
        <span style="margin-right: -150px; text-align: center"
          >新疆地震数据管理及评估信息服务平台</span
        >
        <span
          style="
            position: relative;
            font-size: 16px;
            top: 15px;
            left: 30%;
            font-weight: lighter;
          "
          >{{ time }}</span
        >
      </p>
      <dv-decoration-8
        :color="['#5cb3cc', '#f9f4dc']"
        style="width: 22%; height: 30px; margin-left: 2.5%; float: left"
      />
      <dv-decoration-5
        :color="['#5cb3cc', '#f9f4dc']"
        style="width: 50%; height: 40px; margin: -5px auto; float: left"
      />
      <dv-decoration-8
        :color="['#5cb3cc', '#f9f4dc']"
        :reverse="true"
        style="width: 23%; height: 30px; float: left"
      />
    </div>
    <div id="left-species" style="width: 28%; height: 85.5%; float: left">
      <dv-border-box-4
        :color="['#5cb3cc', '#eef7f2']"
        style="width: 96%; height: 98%; margin: 2% 0 0 6%"
      >
        <div
          id="left1"
          style="height: 49%; width: 95%; padding: 10% 0 0 6%"
        ></div>
        <div
          id="left3"
          style="height: 49%; width: 95%; padding: 0% 0 0 6%"
        ></div>
      </dv-border-box-4>
    </div>
    <div style="width: 46%; height: 57%; float: left; margin-left: -33px">
      <div id="center-desc" style="width: 100%; height: 25%; float: left">
        <div class="no">
          <div class="no-hd">
            <ul>
              <!-- <li style="color: aquamarine">111115</li>
              <li style="font-size: 3.425rem">125811</li>
              <li style="color: tomato">443</li> -->
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <!-- <li>审查通过</li>
              <li>报名人数</li>
              <li>审查驳回</li> -->
            </ul>
          </div>
        </div>
      </div>
      <!-- float: left; left: 2% -->
      <div
        id="center-map"
        style="
          width: 42%;
          height: 60%;
          position: absolute;
          right: 60vh;
          top: 11vh;
        "
      ></div>
    </div>
    <div style="width: 28%; height: 57%; float: left; position: relative">
      <div id="right-div" style="width: 95%; height: 96%; margin: 2% 0">
        <div
          id="right-chart"
          style="
            height: 118%;
            position: relative;
            bottom: 20px;
            right: 10px;
            overflow: hidden;
          "
        ></div>
        <dv-decoration-4
          :reverse="true"
          style="
            width: 100px;
            height: 5px;
            position: absolute;
            top: 0;
            left: -10px;
          "
        />
        <dv-decoration-4
          style="width: 5px; height: 100px; position: absolute; top: -10px"
        />
      </div>
    </div>
    <div id="bottom-info-box" style="width: 72%; height: 28.5%; float: left">
      <dv-border-box-4
        :color="['#5cb3cc', '#eef7f2']"
        :reverse="true"
        style="width: 98%"
      >
        <div
          id="bottom-chart"
          style="
            width: 66%;
            height: 66%;
            position: relative;
            top: 33px;
            left: -33px;
            float: left;
          "
        ></div>
        <div
          style="
            position: absolute;
            width: 8%;
            height: 22%;
            top: 42%;
            right: 38%;
          "
        >
          <span
            style="
              display: block;
              font-size: 24px;
              margin: 6px 10px;
              color: yellow;
              font-family: electronicFont;
            "
            >{{ chart5Percent }}</span
          >
        </div>
        <div
          id="bottom-bar"
          style="
            width: 34%;
            height: 88%;
            position: relative;
            float: left;
            right: 4%;
            padding: 10px 0 2px 0;
          "
        >
          <dv-scroll-board
            :config="config"
            style="
              width: 1000px;
              height: 178px;
              position: absolute;
              right: 16px;
              top: 8px;
            "
          />
        </div>
      </dv-border-box-4>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import changji from "@/assets/map/changji.json";
import { loadModules } from "esri-loader";
var map, chart1, chart3, chart4, chart5;

export default {
  name: "Visualization",
  data() {
    return {
      config: {
        header: ['地区', '震级/级', '深度/km'],
        data: [
          ["疆喀什地区塔什库尔干县", "4.2", "10"],
          ["疆阿克苏地区库车市", "3.0", "14"],
          ["疆克孜勒苏州阿图什市", "3.0", "30"],
          ["疆阿克苏地区沙雅县", "3.1", "10"],
          ["疆阿克苏地区库车市", "3.4", "10"],
          ["疆阿克苏地区拜城县", "3.1", "20"],
          ["疆克孜勒苏州阿合奇县", "4.5", "10"],
          ["疆克孜勒苏州阿合奇县", "3.0", "10"],
          ["疆阿克苏地区沙雅县", "3.1", "18"],
          ["疆克孜勒苏州阿合奇县", "3.1", "10"],
        ],
      },

      time: "",
      jsonCache: {},
      dataCache: {},
      chart5i: 0,
      chart5Data: [[111115], [443], [111558]],
      chart5MaxData: 125811,
      chart5Percent: undefined,
      chart5Color: ["#1ba784", "#ef475d", "#1890ff"],
    };
  },
  created() {
    this.getTime();
  },
  mounted() {
    this.getBasicEchartsData();
    this._createMapView();
  },
  methods: {
    //创建地图
    _createMapView: function () {
      const _self = this; //定义一个_self防止后续操作中this丢失
      const option = {
        //定义一个包含有JS API中js开发包和css样式文件的对象
        url: "https://js.arcgis.com/4.22/",
        css: "https://js.arcgis.com/4.22/esri/themes/light/main.css",
      };

      //通过loadModules来做衔接
      loadModules(
        [
          "esri/Map",
          "esri/Basemap",
          "esri/views/MapView",
          "esri/layers/FeatureLayer",
          "esri/layers/TileLayer",
        ],
        option
      )
        .then(([Map, Basemap, MapView, FeatureLayer, TileLayer]) => {
          //业务代码在此处编写

          //1.设置自定义蓝色地图
          let basemap = new Basemap({
            baseLayers: [
              new TileLayer({
                url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
                title: "Basemap",
              }),
            ],
            title: "basemap",
            id: "basemap",
          });

          //2.实例化地图
          const map = new Map({
            basemap: basemap,
          });



          //3.将地图实例化到容器内
          const view = new MapView({
            container: "center-map", // 视图的容器
            map: map, // Map的实例放入视图中
            zoom: 10, // 当前地图缩放等级
            center: [87.62171281400627, 43.82786013693613], // 初始显示的地图中心点，经纬度
          });
          view.ui.components = []; // 清除掉地图左上角默认的缩放图标

          //4.添加要素服务
          const trailheadsLayer = new FeatureLayer({
            url: "https://gis.bt3s.cn/server/rest/services/earthquake_xj/FeatureServer/0",
          });
          map.add(trailheadsLayer);

        })
        .catch((err) => {
          _self.$message("地图创建失败" + err);
        });



    },

    getTime() {
      this.timeFormate();
      setInterval(() => {
        this.timeFormate();
      }, 1000);
    },
    getBasicEchartsData() {
      this.initMap();
      this.initChart1();
      this.initChart3();
      this.initChart4();
      this.initChart5();
    },
    initMap() {
      echarts.registerMap("昌吉州", changji);
      // map = echarts.init(document.getElementById("center-map"));
      // let mapOption = {
      //   animation: false,
      //   tooltip: {
      //     trigger: "axis",
      //   },
      //   series: [
      //     {
      //       name: "昌吉州",
      //       type: "map", //图表类型为地图
      //       mapType: "昌吉州", //地图类型中国地图，
      //       zoom: 1.25,
      //       selectedMode: "single", //选中模式，可以设置多选模式和单选，不能选择则删除删除属性
      //       hoverable: true, //悬浮是否高亮
      //       itemStyle: {
      //         areaColor: "#63bbd0",
      //         borderColor: "#000",
      //       },
      //       emphasis: {
      //         label: {
      //           show: true,
      //           color: "#fff",
      //         },
      //         itemStyle: {
      //           areaColor: "#1a94bc",
      //         },
      //       },
      //     },
      //   ],
      // };
      // map.setOption(mapOption, true);
      // map.on("click", function (params) {
      //   console.log(params);
      // });
    },
    initChart1() {
      if (chart1 == null)
        chart1 = echarts.init(document.getElementById("left1"), "dark");
      let option = {
        backgroundColor: "rgb(40, 44, 52)",
        color: ["#73c0de", "#3ba272", "#9fa39a"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          top: "15%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "昌吉",
            "阜康",
            "玛纳斯",
            "呼图壁",
            "吉木萨尔",
            "奇台",
            "木垒",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "待处理",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 302, 301, 334, 390, 330, 320],
          },
          {
            name: "已通过",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "已驳回",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      };
      option && chart1.setOption(option, true);
    },
    initChart3() {
      let that = this;
      console.log(that);
      if (chart3 == null)
        chart3 = echarts.init(document.getElementById("left3", "dark"));

      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          data: [
            "昌吉市",
            "阜康市",
            "玛纳斯县",
            "呼图壁县",
            "吉木萨尔县",
            "奇台县",
            "木垒县",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "30%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          data: [
            "2022-10-01",
            "2022-10-01",
            "2022-10-01",
            "2022-10-01",
            "2022-10-01",
            "2022-10-01",
            "2022-10-01",
          ],
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "昌吉市",
            type: "line",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "阜康市",
            type: "line",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "玛纳斯县",
            type: "line",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "呼图壁县",
            type: "line",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "吉木萨尔县",
            type: "line",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
          {
            name: "奇台县",
            type: "line",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
          {
            name: "木垒县",
            type: "line",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      option && chart3.setOption(option, true);
    },
    initChart4() {
      if (chart4 == null)
        chart4 = echarts.init(document.getElementById("right-chart"));
      // red
      // const colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];
      // blue
      const colors = ["#c3d7df", "#8abcd1", "#1a94bc", "#158bb8", "#126e82"];
      const bgColor = "#2E2733";
      const itemStyle = {
        star5: {
          color: colors[0],
        },
        star4: {
          color: colors[1],
        },
        star3: {
          color: colors[2],
        },
        star2: {
          color: colors[3],
        },
      };
      const data = [
        {
          name: "应届",
          itemStyle: {
            color: colors[1],
          },
          children: [
            {
              name: "普通考生",
              children: [
                {
                  name: 11231,
                  children: [
                    {
                      name: "普通类",
                    },
                  ],
                },
                {
                  name: 468,
                  children: [
                    {
                      name: "单列类\n(外语）",
                    },
                  ],
                },
                {
                  name: 48,
                  children: [
                    {
                      name: "单列类\n(民文)",
                    },
                  ],
                },
              ],
            },
            {
              name: "新疆籍考生",
              children: [
                {
                  name: 16273,
                  children: [
                    {
                      name: "普通类",
                    },
                  ],
                },
                {
                  name: 3122,
                  children: [
                    {
                      name: "单列类\n(外语）",
                    },
                  ],
                },
              ],
            },
            {
              name: "中职艺体生",
              children: [
                {
                  name: 445,
                  children: [
                    {
                      name: "三校生\n升高职\n普通类",
                    },
                  ],
                },
                {
                  name: 5321,
                  children: [
                    {
                      name: "三校生\n升高职\n单列类",
                    },
                  ],
                },
              ],
            },
            {
              name: "专干子女",
              children: [
                {
                  name: 2445,
                  children: [
                    {
                      name: "普通类",
                    },
                  ],
                },
                {
                  name: 123,
                  children: [
                    {
                      name: "单列类\n(外语）",
                    },
                  ],
                },
              ],
            },
            {
              name: "援疆子女",
              children: [
                {
                  name: 4445,
                  children: [
                    {
                      name: "普通类",
                    },
                  ],
                },
                {
                  name: 223,
                  children: [
                    {
                      name: "单列类\n(外语）",
                    },
                  ],
                },
              ],
            },
            {
              name: "随迁子女",
              children: [
                {
                  name: 9643,
                  children: [
                    {
                      name: "普通类",
                    },
                  ],
                },
              ],
            },
            {
              name: "内高班考生",
              children: [
                {
                  name: 2445,
                  children: [
                    {
                      name: "普通类",
                    },
                  ],
                },
                {
                  name: 123,
                  children: [
                    {
                      name: "单列类\n(外语）",
                    },
                  ],
                },
              ],
            },
            {
              name: "中职班考生",
              children: [
                {
                  name: 2445,
                  children: [
                    {
                      name: "普通类",
                    },
                  ],
                },
                {
                  name: 123,
                  children: [
                    {
                      name: "单列类\n(外语）",
                    },
                  ],
                },
                {
                  name: 623,
                  children: [
                    {
                      name: "三校生\n升高职\n普通类",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          name: "往届",
          itemStyle: {
            color: colors[2],
          },
          children: [
            {
              name: "社会考生",
              children: [
                {
                  name: 13221,
                  children: [
                    {
                      name: "普通类",
                    },
                  ],
                },
                {
                  name: 4542,
                  children: [
                    {
                      name: "往届民\n语言类",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ];
      for (let j = 0; j < data.length; ++j) {
        let level1 = data[j].children;
        for (let i = 0; i < level1.length; ++i) {
          let block = level1[i].children;
          let bookScore = [];
          let bookScoreId;
          for (let star = 0; star < block.length; ++star) {
            let style = (function (name) {
              if (name > 10000) {
                bookScoreId = 0;
                return itemStyle.star5;
              } else if (name > 2000 && name <= 10000) {
                bookScoreId = 1;
                return itemStyle.star4;
              } else if (name > 500 && name <= 2000) {
                bookScoreId = 2;
                return itemStyle.star3;
              } else if (name <= 500) {
                bookScoreId = 3;
                return itemStyle.star4;
              }
            })(block[star].name);
            block[star].label = {
              color: style.color,
              downplay: {
                opacity: 0.5,
              },
            };
            if (block[star].children) {
              style = {
                opacity: 1,
                color: style.color,
              };
              block[star].children.forEach(function (book) {
                book.value = 1;
                book.itemStyle = style;
                book.label = {
                  color: style.color,
                };
                let value = 1;
                if (bookScoreId === 0 || bookScoreId === 3) {
                  value = 5;
                }
                if (bookScore[bookScoreId]) {
                  bookScore[bookScoreId].value += value;
                } else {
                  bookScore[bookScoreId] = {
                    color: colors[bookScoreId],
                    value: value,
                  };
                }
              });
            }
          }
          level1[i].itemStyle = {
            color: data[j].itemStyle.color,
          };
        }
      }
      let option = {
        backgroundColor: "rgb(40, 44, 52)",
        color: colors,
        series: [
          {
            type: "sunburst",
            center: ["50%", "48%"],
            data: data,
            sort: function (a, b) {
              if (a.depth === 1) {
                return b.getValue() - a.getValue();
              } else {
                return a.dataIndex - b.dataIndex;
              }
            },
            label: {
              fontSize: 8,
              rotate: "radial",
              color: bgColor,
            },
            itemStyle: {
              borderColor: bgColor,
              borderWidth: 2,
            },
            levels: [
              {},
              {
                r0: 0,
                r: 20,
                label: {
                  rotate: 0,
                },
              },
              {
                r0: 20,
                r: 70,
              },
              {
                r0: 75,
                r: 95,
                itemStyle: {
                  shadowBlur: 2,
                  shadowColor: colors[2],
                  color: "transparent",
                },
                label: {
                  rotate: "tangential",
                  fontSize: 8,
                  color: colors[0],
                },
              },
              {
                r0: 95,
                r: 100,
                itemStyle: {
                  shadowBlur: 80,
                  shadowColor: colors[0],
                },
                label: {
                  fontSize: 8,
                  position: "outside",
                  textShadowBlur: 5,
                  textShadowColor: "#333",
                },
                downplay: {
                  label: {
                    fontSize: 8,
                    opacity: 0.5,
                  },
                },
              },
            ],
          },
        ],
      };
      option && chart4.setOption(option);
      // let option = {
      //   tooltip: {
      //     trigger: 'item',
      //     formatter: '{a} <br/>{b}: {c} ({d}%)'
      //   },
      //   legend: [
      //     {
      //       data: ['普通考生','随迁子女'],
      //       textStyle: {
      //         color: '#ffffff',
      //       }
      //     }
      //   ],
      //   series: [
      //     {
      //       top: '20',
      //       name: '考生类别',
      //       type: 'pie',
      //       selectedMode: 'single',
      //       radius: [0, '30%'],
      //       label: {
      //         position: 'inner',
      //         fontSize: 14
      //       },
      //       labelLine: {
      //         show: false
      //       },
      //       itemStyle: {
      //         normal: {
      //           color: function(params){
      //             let colors = ['#fcd337', '#ee3f4d', '#22a2c3'];
      //             return colors[params.dataIndex];
      //           }
      //         },
      //       },
      //       data: [
      //         { value: 1548, name: '普通考生' },
      //         { value: 775, name: '随迁子女' },
      //       ]
      //     },
      //     {
      //       top: '20',
      //       name: '详细比例',
      //       type: 'pie',
      //       radius: ['55%', '75%'],
      //       label: {
      //         position: 'inner',
      //         fontSize: 12
      //       },
      //       labelLine: {
      //         show: false
      //       },
      //       data: [
      //         { value: 1048, name: '普通考生' },
      //         { value: 335, name: '新疆籍考生' },
      //         { value: 310, name: '新疆籍中职艺体考生' },
      //         { value: 251, name: '社会考生' },
      //         { value: 234, name: '专业干部子女' },
      //         { value: 147, name: '援疆干部子女' },
      //         { value: 135, name: '内高班考生' },
      //         { value: 102, name: '中职、内职班毕业生' }
      //       ]
      //     }
      //   ]
      // };
      // option && chart4.setOption(option);
      // chart4.on("click",e => {
      //   if(e.data.name == '普通考生' || e.data.name == '随迁子女')
      //     this.changeOutPie(e.data.name);
      // })
    },
    initChart5() {
      let that = this;
      console.log(that);
      if (chart5 == null)
        chart5 = echarts.init(document.getElementById("bottom-chart"));
    },
    updateCharts(adCode) {
      this.initChart1(adCode);
      this.initChart2(adCode);
      this.initChart3(adCode);
      this.initChart4(adCode);
      this.dataTable.data = this.dataCache[adCode].table;
      this.dataTable = { ...this.dataTable };
    },
    timeFormate() {
      let timeStamp = new Date();
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      let hh =
        new Date(timeStamp).getHours() < 10
          ? "0" + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours();
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? "0" + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes();
      let ss =
        new Date(timeStamp).getSeconds() < 10
          ? "0" + new Date(timeStamp).getSeconds()
          : new Date(timeStamp).getSeconds();
      this.time =
        year +
        "年" +
        month +
        "月" +
        date +
        "日" +
        "    " +
        hh +
        ":" +
        mm +
        ":" +
        ss;
    },
    jumpToLogin() {
      this.$store.dispatch("LogOut").then(() => {
        location.href = "/index";
      });
    },
    jumpToManagement() {
      this.$router.replace("/index");
    },
  },
};
window.addEventListener("resize", function () {
  map.resize();
  chart1.resize();
  chart3.resize();
  chart4.resize();
  chart5.resize();
});
</script>

<style>
/*引用字库*/
@font-face {
  font-family: "electronicFont";
  src: url("./assets/font/DS-DIGIT.TTF");
}
.no {
  background: rgba(40, 44, 52, 0.1);
  height: 100%;
  padding: 0.1875rem;
}
.no .no-hd {
  /* position: relative; */
  border: 1px solid rgba(40, 44, 52, 0.17);
}
.no .no-hd::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  top: 0;
  left: 0;
}
.no .no-hd::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  right: 0;
  bottom: 0;
}
.no .no-hd ul {
  display: flex;
  list-style-type: none;
}
.no .no-hd ul li {
  position: relative;
  flex: 1;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  font-size: 2.675rem;
  color: ghostwhite;
  padding: 0.05rem 0;
  font-family: electronicFont;
  font-weight: bold;
}
.no .no-hd ul li:first-child::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}
.no .no-hd ul li:nth-child(2)::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}
.no .no-bd {
  margin-top: -5px;
}
.no .no-bd ul {
  display: flex;
  list-style-type: none;
}
.no .no-bd ul li {
  flex: 1;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-size: 0.825rem;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 0.125rem;
}
.el-carousel__container {
  height: 100%;
}
#right-div .container {
  animation-duration: 0s !important;
}
</style>
